<template>
  <div class="check">
    <div class="steps">
      <el-steps :active="currentStep">
        <el-step title="实名认证"></el-step>
        <el-step title="上传身份证"></el-step>
        <el-step title="确认协议"></el-step>
      </el-steps>
    </div>
    <div class="container">
      <auth-component @next="goNext" v-if="currentStep === 0" :isComponent="true"></auth-component>
      <div v-else-if="currentStep === 1" class="step2">
        <div class="h2 line">个人信息 <span class="tips danger-text">请上实名认证信息中的身份证，如错误则无法通过，最多有3次机会。</span></div>
        <el-form :model="companyInfo" label-width="400px">
          <el-form-item label="身份证人像面：">
            <el-upload
              class="uploader"
              :action="$uploadurl"
              :headers="{ token: userInfo.token }"
              :show-file-list="false"
              :on-success="handleIdCardFrontSuccess"
              :before-upload="beforeUpload">
              <img v-if="companyInfo.id_card_front" :src="companyInfo.id_card_front | checkurl" class="idcard">
              <i v-else class="el-icon-plus idcard"></i>
              <span slot="tip" class="danger-text">（仅支持1M以内JPG/JEPG/PNG格式图片 要求：画面清晰无遮挡）</span>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证国徽面：">
            <el-upload
              class="uploader"
              :action="$uploadurl"
              :headers="{ token: userInfo.token }"
              :show-file-list="false"
              :on-success="handleIdCardReverseSuccess"
              :before-upload="beforeUpload">
              <img v-if="companyInfo.id_card_reverse" :src="companyInfo.id_card_reverse | checkurl" class="idcard">
              <i v-else class="el-icon-plus idcard"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitUpdate()">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else class="step3">
        <div class="contract">
          <iframe src="/doc/hetong.pdf" frameborder="0"></iframe>
          <iframe src="/doc/weituoshu1.pdf" frameborder="0"></iframe>
        </div>
        <!-- <el-checkbox v-model="checked">我已阅读</el-checkbox> -->
        <el-button type="primary" @click="agree()">接受协议</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import AuthComponent from '../auth/index'
import { mapGetters } from 'vuex'
export default {
  name: 'check',
  components: {
    AuthComponent
  },
  data() {
    return {
      companyInfo: {
        id_card_reverse: '',
        id_card_front: ''
      },
      currentStep: -1
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    goNext(res) {
      this.getStep()
    },
    submitUpdate() {
      let loading = this.$loading({
        lock: true,
        text: '身份证识别中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$http.post('/personal/User/idcardauth', {
        ...this.companyInfo
      }).then(res => {
        loading.close()
        if (res.status === 1) {
          this.getStep()
        }
      })
    },
    handleIdCardFrontSuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.id_card_front = res.data.list.file
      } else {
        this.$message.error(res.message)
      }
    },
    handleIdCardReverseSuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.id_card_reverse = res.data.list.file
      } else {
        this.$message.error(res.message)
      }
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 < 1000;

      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1M!');
      }
      return isLt1M;
    },
    agree() {
      this.$http.post('/personal/user/protocol').then(res => {
        if (res.status === 1) {
          this.$router.push('/personal/auth')
        }
      })
    },
    getStep() {
      this.$http.get('/personal/User/procedure').then(res => {
        if (res.status === 1) {
          if (res.data.code === 1) {
            this.currentStep = 0
          } else if (res.data.code === 2) {
            this.currentStep = 1
          } else if (res.data.code === 4) {
            this.currentStep = 2
          } else {
            this.$router.push('/personal/auth')
          }
        }
      })
    }
  },
  mounted() {
    this.getStep()
  }
}
</script>
<style scoped lang="less">
.check {
  width: 1200px;
  padding: 30px 50px;
  margin: 0 auto;
}
.steps {
  width: 600px;
  margin: 20px auto;
}
.container {
  margin: 0 auto;
  .step2 {
    margin-top: 50px;
  }
  .step3 {
    text-align: center;
  }
  .contract {
    width: 1200px;
    margin: 30px auto;
    iframe {
      width: 560px;
      height: 600px;
      background: #ddd;
      margin: 0 20px;
    }
  }
}

.uploader {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;
}
.uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.uploader .el-upload:hover {
  border-color: #409EFF;
}
.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 256px;
  line-height: 256px;
  text-align: center;
  border: 2px dashed #eee;
}
.avatar {
  width: 178px;
  height: 256px;
  display: block;
}
.idcard {
  width: 200px;
  height: 125px;
  line-height: 125px;
  font-size: 36px;
  color: #999;
  vertical-align: top;
  &.el-icon-plus {
    border: 2px dashed #eee;
  }
}
/deep/ .el-input.is-disabled .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  cursor: text;
  color: #333;
}
img {
  object-fit: contain;
}.h2 {
  margin-bottom: 20px;
}
</style>